<template>
  <div>
    <!-- <el-card> -->
    <div id="calendar">
      <!-- <div style="margin: 10px 0;">
          <el-button type="primary" size="small" @click="lookDate">查看数据</el-button>
        </div> -->
      <div id="right">
        <!-- 年份 月份 -->
        <div class="month">
          <ul>
            <!-- <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li> -->
            <!--  @click="pickYear(currentYear,currentMonth)" -->
            <li class="year-month">
              <span class="choose-year">{{ currentYear }}年{{ currentMonth }}月</span>
            </li>
            <li>
              <el-button-group>
                <el-button class="changeButton" type="primary" @click="pickPre(currentYear,currentMonth)" size="small">
                  上个月</el-button>
                <el-button class="changeButton" type="primary" @click="pickToday(currentYear,currentMonth)" size="small">
                  今天</el-button>
                <el-button class="changeButton" type="primary" @click="pickNext(currentYear,currentMonth)" size="small">
                  下个月</el-button>
              </el-button-group>
            </li>
            <!-- <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li> -->
          </ul>
        </div>
        <!-- 星期 -->
        <ul class="weekdays">
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
          <li>日</li>
        </ul>
        <!-- 日期 -->
        <ul class="days">
          <li v-for="(dayobject,index) in days" :key="index" style="height: 80px;">
            <!--本月-->
            <!--如果不是本月  改变类名加灰色-->

            <!-- <div v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</div> -->

            <!--如果是本月  还需要判断是不是这一天-->
            <div v-if="!(dayobject.day.getMonth()+1 != currentMonth)">
              <!--今天-->
              <div class="dateNum"
                v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()">
                {{ dayobject.day.getDate() }}</div>
              <div v-else class="dateNum">{{ dayobject.day.getDate() }}</div>
              <div class="checkboxChoose">
                <el-checkbox size="mini" :id="(dayobject.day.getMonth()+1)+'-'+dayobject.day.getDate()"
                  v-model="dayobject.checkbox" @change="changeModel(dayobject,index)" true-label="0" false-label="1">
                </el-checkbox>
              </div>
              <div class="hourInput">
                <el-input v-model="dayobject.time" maxlength="4" size="mini" style="width: 50%;"
                  oninput="value=value.replace(/[^\d]/g,'')" :disabled="dayobject.checkbox=='0'">
                  </el-input>
                  <span class="hourClass">h</span>
              </div>
            </div>

            <p
              v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate()>=new Date().getDate()">

              <!-- <input type="checkbox" :id="(dayobject.day.getMonth()+1)+'-'+dayobject.day.getDate()" :value="(dayobject.day.getMonth()+1)+'-'+dayobject.day.getDate()" v-model="checkedDays" > -->


            </p>

            <div v-if="leftobj[dayobject.index]">

            </div>
            <!-- 计算属性 -->
            <!-- <div v-show="0">{{yearMonth}}</div> -->
          </li>
        </ul>
      </div>
      <!--right-->
    </div>
    <!-- </el-card> -->
  </div>
</template>

<script>
  export default {
    props: {
      queryInfo: Array,
    },
    data() {
      return {
        currentDay: 1,
        currentMonth: 1,
        currentYear: 1970,
        currentWeek: 1,
        days: [],
        leftobj: [ //存放剩余数量
          {
            count: 1,
            value: false
          },
          {
            count: 2,
            value: false
          },
          {
            count: 3,
            value: false
          },
          {
            count: 4,
            value: false
          },
          {
            count: 5,
            value: false
          },
        ],
        checkedDays: [],
        checkedCount: 20,
        day: '',
      }
    },
    created: function () {
      this.initData(null);
    },
    watch: {
      queryInfo(val) {
        this.lookDate();
      },
      currentMonth(val) {
        this.$emit('changeMonth', this.currentYear, this.currentMonth);
        console.log('currentMonth', this.currentMonth)
        return this.currentYear + this.currentMonth + '';
      }
    },
    computed: {
      // yearMonth(){
      //   this.$emit('changeMonth',this.currentYear,this.currentMonth);
      //   return this.currentYear+this.currentMonth+'';
      // }
    },
    mounted() {
      // this.lookDate();
    },
    methods: {
      lookDate() {
        var that = this;
        that.days.forEach((item, index) => {
          var day = that.timeFormat(item.day);
          if (that.queryInfo && that.queryInfo.length > 0) {
            for (var i = 0; i < that.queryInfo.length; i++) {
              if (day == that.queryInfo[i].DATENUM) {
                item.time = that.queryInfo[i].ALLOHOURS;
                item.checkbox = that.queryInfo[i].ISENABLEHOLIDAY;
                item.ENABLEHOURS = that.queryInfo[i].ENABLEHOURS;
                break;
              } else {
                item.time = '';
                item.checkbox = '2';
              }
            }
          } else {
            item.time = '';
            item.checkbox = '2';
          }
        });
      },
      // 时间转变为yymmdd
      timeFormat(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        // this.day = year+''+month+''+day;
        return year + '' + month + '' + day;
      },
      // 获取这个月第一天和最后一天得位置
      // findIndex(info){
      //   var length = this.days.length;
      //   if(info == 'first'){
      //     for(var i=0;i<length;i++){
      //       if(this.days[i].day.getDate() == '1' || this.days[i].day.getDate() == '01'){
      //         break;
      //       }
      //     }
      //   }else{
      //     // 计算这个月最后一天为几号
      //     var date= new Date(this.days[9].day);
      //     date.setMonth(date.getMonth() + 1);
      //     //日期设置为0号, 0表示1号的前一天
      //     var lastDay = date.setDate(0);
      //     var day = new Date(lastDay).getDate();
      //     for(var i=length-1;i>=0;i--){
      //       if(this.days[i].day.getDate() == day){
      //         break;
      //       }
      //     }
      //   }
      //   return i;
      // },
      getleft: function () {
        return this.left++
      },
      cutleft: function (day) {
        // this.leftArray[day.index]-=1;
        if (this.leftobj[day.index].count >= 1)
          this.leftobj[day.index].count--;
        else
          alert('已经没有位置了')
      },
      initleftcount: function () {
        //每次初始化需要更新数量
        for (var i = 0; i < 4; i++) {
          this.leftobj[i].count = i + 3;
        }
      },
      initData: function (cur) {
        var leftcount = 0;
        var date;
        var index = 0;
        //this.initleftcount();
        //有两种方案  一种是每次翻页 ajax获取数据初始化   http请求过多会导致资源浪费
        // 一种是每次请求 ajax获取数据初始化    数据更新过慢会导致缺少实时性
        //还可以setTimeout 定时请求更新数据  实现数据刷新（可能会更好）


        if (cur) {
          date = new Date(cur);
        } else {
          var now = new Date();
          var d = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
          d.setDate(35);
          date = new Date(this.formatDate(d.getFullYear(), d.getMonth(), 1));
        }
        this.currentDay = date.getDate();
        // console.log(this.currentDay);
        this.currentYear = date.getFullYear();
        this.currentMonth = date.getMonth() + 1;

        this.currentWeek = date.getDay(); // 1...6,0
        if (this.currentWeek == 0) {
          this.currentWeek = 7;
        }
        var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
        // console.log("today:" + str + "," + this.currentWeek);
        this.days.length = 0;
        // 今天是周日，放在第一行第7个位置，前面6个
        //初始化本周
        for (var i = this.currentWeek - 1; i >= 0; i--) {
          var d = new Date(str);
          d.setDate(d.getDate() - i);
          // console.log("y:" + d.getDate());

          var dayobject = {};
          dayobject.day = d;
          dayobject.time = '';
          dayobject.checkbox = '2';
          var now = new Date();
          if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now
            .getFullYear()) {
            dayobject.index = index++;
          } else if (index != 0 && index < 3)
            dayobject.index = index++;

          this.days.push(dayobject);
        }
        //其他周
        for (var i = 1; i <= 42 - this.currentWeek; i++) {
          var d = new Date(str);
          d.setDate(d.getDate() + i);
          var dayobject = {};
          dayobject.day = d;
          dayobject.time = '';
          dayobject.checkbox = '2';
          var now = new Date();
          if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now
            .getFullYear()) {
            dayobject.index = index++;
          } else if (index != 0 && index < 3)
            dayobject.index = index++;
          this.days.push(dayobject);
        }
      },
      pickPre: function (year, month) {

        // setDate(0); 上月最后一天
        // setDate(-1); 上月倒数第二天
        // setDate(dx) 参数dx为 上月最后一天的前后dx天
        this.$confirm("如果继续，系统将不会保存您的更改。", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            var d = new Date(this.formatDate(year, month, 1));
            d.setDate(0);
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      pickToday:function (year, month) {
        this.$confirm("如果继续，系统将不会保存您的更改。", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            let date = new Date()
            this.initData(this.formatDate(date.getFullYear(), date.getMonth() + 1, 1));
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      pickNext: function (year, month) {
        this.$confirm("如果继续，系统将不会保存您的更改。", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            var d = new Date(this.formatDate(year, month, 1));
            d.setDate(35);
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      pickYear: function (year, month) {
        alert(year + "," + month);
      },

      // 返回 类似 2016-01-02 格式的字符串
      formatDate: function (year, month, day) {
        var y = year;
        var m = month;
        if (m < 10) m = "0" + m;
        var d = day;
        if (d < 10) d = "0" + d;
        return y + "-" + m + "-" + d
      },
      // 复选框选中是，时间不可输入且置空
      changeModel(val, index) {
        if (val.checkbox == '0') {
          this.days[index].time = '';
        }
      },
    },
  };

</script>


<style lang="scss">
  #calendar {
   .el-input__inner {
      color:#000;
      font-size:0.9rem;
      padding:0 5px;
    }
  }

</style>

<style lang="scss" scoped>


 .hourClass{
   font-size: 0.9rem;
   color:#989998;
 }
  .checkboxChoose {
    margin: -20px 5px 0 0;
    text-align: right;
  }

  .hourInput {
    margin: 20px 5px 0 0;
    text-align: right;
    // margin-right:0px;
  }

  .dateNum {
    // color: #acc;
    margin: -8px 0 0 5px;
  }

  .changeButton {
    // padding: 6px;
    color: #000;
  }

  // 样式修改
  .el-date-editor {
    width: 72px;
  }

  * {
    box-sizing: border-box;
  }

  ul {
    list-style-type: none;
  }

  body {
    font-family: Verdana, sans-serif;
    background: #E8F0F3;
  }

  #calendar {
    width: 100%;
    margin: 0 auto;
    // box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
  }

  .month {
    color: #000;
    width: 100%;
    background: #fff;
  }

  .month ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .year-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  // .year-month:hover {
  //     background: rgba(150, 2, 12, 0.1);
  // }



  .arrow {
    padding: 30px;
  }

  .arrow:hover {
    background: rgba(100, 2, 12, 0.1);
  }

  .month ul li {
    color: #000;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }

  .weekdays {
    border-top: 1px #EBEEF5 solid;
    margin: 0;
    padding: 10px 0;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    color: #000;
    justify-content: space-around;
    padding-top: 28px;
  }

  .weekdays li {
    display: inline-block;
    width: 13.6%;
    text-align: center;
  }

  .days {
    padding: 0;
    background: #FFFFFF;
    // margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .days li {
    list-style-type: none;
    display: inline-block;
    width: 14.2%;
    // text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    font-size: 1rem;
    color: #000;
    border-top: 1px #D8DBE6 solid;
    border-left: 1px #D8DBE6 solid;
  }

  .days li:nth-child(7n) {
    // color:#0ff;
    border-right: 1px #D8DBE6 solid;
  }

  .days li:nth-child(n+36) {
    // color:#0ff;
    // background: #acc;
    border-bottom: 1px #D8DBE6 solid;
  }

  .days li .active {
    padding: 6px 10px;
    border-radius: 50%;
    background: #00B8EC;
    color: #fff;
  }

  .days li .other-month {
    padding: 5px;
    color: gainsboro;
  }

  // .days li:hover {
  //     background: #e1e1e1;
  // }

  #left {
    float: left;
    width: 20%;
  }

  #right {
    float: left;
    width: 100%;
  }

</style>
